<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>

<h3>有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果
    router-view 没有设置名字，那么默认为 default。</h3>
<div id="app">
    <h1>Named Views</h1>
    <ul>
        <li>
            <router-link to="/">/</router-link>
        </li>
        <li>
            <router-link to="/other">/other</router-link>
        </li>
    </ul>
    <router-view class="view one"></router-view>
    <router-view class="view two" name="a"></router-view>
    <router-view class="view three" name="b"></router-view>
</div>

<script>

    const Foo = {template: '<div>foo</div>'}
    const Bar = {template: '<div>bar</div>'}
    const Baz = {template: '<div>baz</div>'}

    const router = new VueRouter({
        mode: 'history',
        routes: [
            {
                path: '/',
                // a single route can define multiple named components
                // which will be rendered into <router-view>s with corresponding names.
                components: {
                    default: Foo,
                    a: Bar,
                    b: Baz
                }
            },
            {
                path: '/other',
                components: {
                    default: Baz,
                    a: Bar,
                    b: Foo
                }
            }
        ]
    })

    new Vue({
        router,
        el: '#app'
    })

</script>
</body>
</html>
